<template>
  <div>
    <top-bar></top-bar>
    <left-bar :datas='data'></left-bar>
    <div class="main">
      <div class="main-mains">
        <div class="main-content">
          <div class="main-mains-top">
            直播分类列表
          </div>
          <div class="main-top-nav">
            <ul>
              <router-link to="/onlineMeeting">
                <li>线上会议直播列表</li>
              </router-link>
              <router-link to="/onlinebroadcast">
                <li class="active">直播分类列表</li>
              </router-link>
            </ul>
          </div>
          <div class="screen clear">
            <div class="fl" @click="add()">新增</div>
          </div>
          <div class="publicTable toLongTable">
            <table class="head_table">
              <tr>
                <td width="5%">ID</td>
                <td width='6%'>分类标题</td>
                <td width='6%'>分类图标</td>
                <td width='6%'>位置排序</td>
                <td width='6%'>首页推荐</td>
                <td width='6%'>是否显示</td>
                <td width='8%'>操作</td>
              </tr>
            </table>
            <el-scrollbar>
              <table class="content_table">
                <tr v-for="(item,index) in listData" :key="index" :class="{active:index%2==1}">
                  <td width="5%">{{item.id}}</td>
                  <td width='6%'>{{item.title}}</td>
                  <td width='6%'>
                    <img :src=item.icon_url alt="">
                  </td>
                  <td width='6%'>
                    <span class="active">{{item.display}}</span>
                  </td>
                  <td width='6%' v-if="item.is_recommend==0">不推荐</td>
                  <td width='6%' v-if="item.is_recommend==1">推荐</td>
                  <td width='6%' v-if="item.status==0">不显示</td>
                  <td width='6%' v-if="item.status==1">显示</td>
                  <td width='8%' class="operation">
                    <span class="active" @click="changes(item)">编辑</span>
                    <span class="active" @click="removes(item.id)">删除</span>
                  </td>
                </tr>
              </table>
            </el-scrollbar>
          </div>
          <div class="nodataTip" v-if="showNodataTip">
            <i class="iconfont icon-zanwuneirong"></i>
            <h5>暂无内容</h5>
          </div>
          <div class="orderBotom">
            <div class="orderBotomRight">
              <el-pagination @current-change="handleCurrentChange" :page-size="15" layout="total, prev, pager, next" :total='totalnum'>
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="system-menban" v-if="editFlag">
      </div>
      <div class="systemPopup" v-if="editFlag">
        <div class="topTitle">
          <span>编辑</span>
          <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
        </div>
        <div class="addBannerPupup">
          <div class="bannerContent clear">
            <span class="leftTitle">排序：</span>
            <div class="rightContent">
              <el-input clearable v-model="numbers" type="number" placeholder="请输入序号"></el-input>
            </div>
          </div>
          <div class="bannerContent clear">
            <span class="leftTitle">分类名称：</span>
            <div class="rightContent">
              <el-input clearable v-model="name" placeholder="请输入分类名称"></el-input>
            </div>
          </div>
          <div class="bannerContent clear">
            <span class="leftTitle">选择图片</span>
            <div class="rightContent">
              <label class="chooseBanner" for="uploads">选择图片</label>
              <input type="file" name="img" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/jpg" @change="uploadImg($event)">
            </div>
          </div>
          <div class="bannerContent clear">
            <span class="leftTitle">logo</span>
            <div class="rightContent">
              <div class="thumbnailBox">
                <img :src=imgUrl alt="">
              </div>
            </div>
          </div>
          <div class="bannerContent clear">
            <span class="leftTitle">首页推荐：</span>
            <div class="rightContent">
              <el-radio v-model="isRecommend" label="0">不推荐</el-radio>
              <el-radio v-model="isRecommend" label="1">推荐</el-radio>
            </div>
          </div>
          <div class="bannerContent clear">
            <span class="leftTitle">是否显示：</span>
            <div class="rightContent">
              <el-radio v-model="isStatus" label="0">不显示</el-radio>
              <el-radio v-model="isStatus" label="1">显示</el-radio>
            </div>
          </div>
          <div class="system-messagebox1-btn clear">
            <div @click="addSubmit()"> 确定</div>
            <div @click="hideSystemPopup()">取消</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import pubilc from "@/api/pubilc";
import onlinemeeting from "@/api/onlinemeeting";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "onlinemeeting",
      pages: 1,
      listData: [],
      totalnum: 0,
      showNodataTip: false,
      editFlag: false,
      numbers: "",
      name: "",
      imgUrl: "",
      imgId: "",
      isRecommend: "",
      isStatus: "",
      listId: ""
    };
  },
  methods: {
    uploadImg(e) {
      let demos = event.currentTarget.files[0];
      var formdata1 = new FormData();
      formdata1.append("file", demos);
      formdata1.append("type", "7");
      pubilc.uploadImg(formdata1).then(res => {
        if (res.code == 1) {
          this.imgUrl = res.data.file.full_path;
          this.imgId = res.data.file.id;
        }
      });
    },
    addSubmit() {
      if (this.numbers == "") {
        this.$message({
          showClose: true,
          message: "请输入排序！",
          type: "error"
        });
        return false;
      }
      if (this.name == "") {
        this.$message({
          showClose: true,
          message: "请输入分类名称！",
          type: "error"
        });
        return false;
      }
      if (this.imgId == "") {
        this.$message({
          showClose: true,
          message: "请选择logo！",
          type: "error"
        });
        return false;
      }
      if (this.isRecommend === "") {
        this.$message({
          showClose: true,
          message: "请选择是否首页推荐！",
          type: "error"
        });
        return false;
      }
      if (this.isStatus === "") {
        this.$message({
          showClose: true,
          message: "请选择是否显示！",
          type: "error"
        });
        return false;
      }
      const options = {
        cid: this.listId,
        title: this.name,
        display: this.numbers,
        is_recommend: this.isRecommend,
        status: this.isStatus,
        icon_id: this.imgId
      };
      onlinemeeting.changeBroadcast(options).then(res => {
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: "修改成功！",
            type: "success"
          });
          this.editFlag = false;
          this.getList();
        }
      });
    },
    changes(data) {
      this.editFlag = true;
      this.name = data.title;
      this.numbers = data.display;
      this.isRecommend = data.is_recommend.toString();
      this.isStatus = data.status.toString();
      this.imgId = data.icon_id;
      this.imgUrl = data.icon_url;
      this.listId = data.id;
    },
    hideSystemPopup() {
      this.editFlag = false;
    },
    add() {
      this.$router.push("/addbroadcast");
    },
    removes(id) {
      this.$confirm("此操作将永久删除该直播分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const options = {
            cid: id
          };
          onlinemeeting.removeBroadcast(options).then(res => {
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: "删除成功！",
                type: "success"
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    handleCurrentChange(val) {
      this.pages = val;
      this.getList();
    },
    getList() {
      this.showNodataTip = false;
      const options = {
        page: this.pages
      };
      onlinemeeting.getBroadcastList(options).then(res => {
        if (res.code == 1) {
          this.listData = res.data.list;
          this.totalnum = res.data.total;
          if (!res.data.total) {
            this.showNodataTip = true;
          }
        }
      });
    }
  },
  mounted() {
    this.getList();
  },
  filters: {
    times(value) {
      var time = new Date(value * 1000);
      var month =
        time.getMonth() + 1 > 9
          ? time.getMonth() + 1
          : "0" + (time.getMonth() + 1);
      var data = time.getDate() > 9 ? time.getDate() : "0" + time.getDate();
      var hour = time.getHours() > 9 ? time.getHours() : "0" + time.getHours();
      var minutes =
        time.getMinutes() > 9 ? time.getMinutes() : "0" + time.getMinutes();
      var second =
        time.getSeconds() > 9 ? time.getSeconds() : "0" + time.getSeconds();
      var times =
        time.getFullYear() +
        "-" +
        month +
        "-" +
        data +
        " " +
        hour +
        ":" +
        minutes +
        ":" +
        second;
      return times;
    }
  }
};
</script>

<style>
</style>
